<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 便签样式效果</title>
</head>
<body>
<div id="mySidenav" class="sidenav">
    <a href="#" id="about">About</a>
    <a href="#" id="blog">Blog</a>
    <a href="#" id="projects">Projects</a>
    <a href="#" id="contact">Contact</a>
</div>

<div style="margin-left:80px;">
    <h2>便签效果</h2>
    <p>鼠标移动到指定便签显示隐藏内容。</p>
</div>
<style>
    #mySidenav a {
        position: absolute;
        left: -80px;
        transition: 0.3s;
        padding: 15px;
        width: 100px;
        text-decoration: none;
        font-size: 20px;
        color: white;
        border-radius: 0 5px 5px 0;
    }

    #mySidenav a:hover {
        left: 0;
    }

    #about {
        top: 20px;
        background-color: #4CAF50;
    }
    #blog{
        top:80px;
        background-color: red;
    }
    #projects{
        top:140px;
        background-color: #90EE90;
    }
    #contact{
        top:200px;
        background-color: #8a4419;
    }

</style>
</body>
</html>
